004_1レスポンシブ対応にする
以下覚え書き
cssの切り替え方法
■ひとつの style.css の中にまとめて記述して「PC用」「タブレット用」「スマホ用」を切り替える方法と、 「style.css(PC用)」「style_tablet.css(タブレット用)」「style_smart.css(スマホ用)」の3つの cssファイルを作って切り替える方法、とがありますが、
修正のしやすさ、メンテナンスの使い勝手を考えるなら、後者の3つのcssファイルを作る方がいいと思う。
画面サイズ
・PC (横幅:960px)
・iPhone 4 / 4S (縦:640×960 横:960×640)
・iPad (縦:768×1024px 横:1024×768px)
外部CSS記述(3つのcssを作り、振り分けて記述、それを読み込ませる)
(header.phpの中に記述)
<!--PC用CSS--> <link rel="stylesheet" media="screen and (min-width: 769px)" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css"> <!--タブレット用CSS--> <link rel="stylesheet" media="screen and (max-width: 768px) and (min-width: 641px)" href="<?php echo get_stylesheet_directory_uri(); ?>/style_tablet.css"> <!--スマホ用CSS--> <link rel="stylesheet" media="screen and (max-width: 640px) and (min-width: 0px)" href="<?php echo get_stylesheet_directory_uri(); ?>/style_smart.css">
※以前は、絶対パスでCSSのURLを入れていましたが、引越しすると直さなければならなくなるので、phpで読み込む形に変更。
※PC用CSS=style.css
※タブレット用CSS=style_tablet.css
※スマホ用CSS=style_smart.css と3種類のcssファイルを用意します。
画像を自動伸縮(各style.css)
デバイスに合わせてヘッダ画像などは伸び縮みさせたいので、
3種のCSSファイルに共通事項として、
/* 画像を自動伸縮する */ img{ max-width: 100%; height: auto; width /***/:auto; }
を入れます。
※ヘッダーのタイトル画像を背景固定にしている場合、自動伸縮しないので、通常のimg srcに切り替えます。
スマホでズームさせたいいかどうか(header.php)
header.phpのヘッダー部分に下記を記述します。
<!DOCTYPE html> <html> <head> <!-- スマホ ズームさせない場合 --> <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" /> <!-- スマホ ズームさせる場合 --> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
レスポンシブ、その他の調整
その他の細かい設定は、テーマの内容によっても変わってくるので、随時確認しながら変えていく形です。
その他、追記したものメモ
各CSSの
/**********************************************************
基本body
**********************************************************/
に下記を追加
↓
overflow-x:hidden; /* 横のスクロールバーを消す */ -webkit-text-size-adjust: 100%; /* スマホ用 */
■チェックツール
www.responsinator.com
■最後にGoogleモバイル フレンドリーでチェック。
Googleモバイル フレンドリーテスト